I am building a web application using React.js and using React Router to manage routing. I want to hide my navbar and footers for the 'Not Found' page.

<Route path='*' element={<NotFound />} />

I see a lot of StackOverflow but it is not working for my application.

my navber is <Menubar /> and footer <Footer />

here is my app.js

function App() {
return (
<div>
  <Menubar />
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='/home' element={<Home />} />

    <Route path='/inventory' element={<RequireAuth>
     <Inventory />
    </RequireAuth>} />

    <Route path='/inventory/:inventoryId' element={<RequireAuth>
      <InventoryItem />
    </RequireAuth>} />

    <Route path='*' element={<NotFound />} />
  </Routes>

  <Footer />
</div>

); }

export default App;